<template>
  <div>
    <BaseHeader></BaseHeader>
    <Search></Search>

    <div class="title-bg"><p>{{getCEText(detail)}}</p></div>
    <div class="container width_1200">
      <div class="detail_content">
        <div class="detail_content-style">{{getCEContent(detail)}}
      </div>
      </div>
<!--      <Layout class="layoutAll">-->
<!--        <div class="mt_10 mb_10" v-html="detail.content"></div>-->
<!--        <Sider ref="side" :collapsed-width="78" class="side-bar">-->
<!--          <div class="article-cate">博客列表</div>-->
<!--          <Menu-->
<!--            ref='menu'-->
<!--            :active-name="activeName"-->
<!--            :open-names="openName"-->
<!--            class="side-menu"-->
<!--            theme="light"-->
<!--            width="auto"-->
<!--            @on-select="onSelect"-->
<!--          >-->
<!--            &lt;!&ndash; 循环导航栏  &ndash;&gt;-->

<!--            <Submenu-->
<!--              v-for="(menu, index) in list"-->
<!--              v-show="menu.children"-->
<!--              :key="index"-->
<!--              :name="menu.articleCategoryName"-->

<!--            >-->
<!--              <template slot="title">-->
<!--                <span>{{ menu.articleCategoryName }}</span>-->
<!--              </template>-->
<!--              <MenuItem-->
<!--                v-for="(chlidren, i) in menu.children"-->
<!--                :key="i"-->
<!--                :name="chlidren.id"-->
<!--              >{{ chlidren.articleCategoryName }}-->
<!--              </MenuItem-->
<!--              >-->
<!--            </Submenu>-->
<!--          </Menu>-->
<!--        </Sider>-->
<!--        <Layout class="layout ml_10">-->
<!--          <Content class="content">-->
<!--            <ul v-show="showList" class="article-list">-->
<!--              <li v-for="(article, index) in articleList" :key="index" @click="getDetail(article.id)">-->
<!--                {{ article.title }}-->
<!--              </li>-->
<!--            </ul>-->
<!--            <transition mode="out-in">-->
<!--              <div v-show="!showList">-->
<!--                <a class="back-btn" @click="showList = true">&lt;返回上一级</a>-->
<!--                <h2 class="mt_10 mb_10">{{ detail.title }}</h2>-->
<!--                <div class="mt_10 mb_10" v-html="detail.content"></div>-->
<!--              </div>-->
<!--            </transition>-->
<!--          </Content>-->
<!--        </Layout>-->
<!--      </Layout>-->
    </div>
  </div>
</template>

<script>
import {articleCateList, articleDetail, articleList} from '@/api/common.js'
import i18n from "@/lang";

export default {
  i18n,
  name: 'Home',
  data() {
    return {
      list: [], // 分類列表
      detail: '', // 文章詳情
      articleList: [], // 分類下的文章列表
      activeName: '1347456734864367616', // 左侧激活项
      openName: [], // 展开的名稱
      params: { // 請求參數
        pageNumber: 1,
        pageSize: 100,
        categoryId: '',
        sort: 'sort'
      },
      showList: true // 展示文章列表
    };
  },
  created() {
    this.detailId =this.$route.params.id;
    this.getDetail(this.detailId)
  },
  methods: {
    // 每次點擊左侧bar的callback
    onSelect(id) {
      this.getList(id)
      this.detail = ''
      this.showList = true
    },
    getCateList() { // 文章分類列表
      articleCateList().then(res => {
        if (res.success) {
          this.list = res.result.filter(res => {
            return res.articleCategoryName === '常見文章';
          })
          if (this.$route.query.id) {
            this.activeName = this.detail.categoryId
            this.list.forEach(e => {
              if (e.children.length) {
                e.children.forEach(i => {
                  if (i.id === this.detail.categoryId) {
                    this.openName.push(e.articleCategoryName)
                  }
                })
              } else {
                delete e.children
              }
            })
          } else {
            this.activeName = this.list[0].children[0].id
            this.openName.push(this.list[0].articleCategoryName)
          }
          this.$nextTick(() => {
            this.$refs.menu.updateOpened()
            this.$refs.menu.updateActiveName()
          })
          console.log(this.activeName)
          this.getList(this.activeName)
        }
      })
    },

    getCEText(obj, filed) {
      if (typeof obj !== 'object') {
        return '';
      }
      if (this.$i18n.locale=== 'en') {
        return obj.enarticleCategoryName;
      }
      return obj.articleCategoryName;
    },

    getCEContent(obj, filed) {
      if (typeof obj !== 'object') {
        return '';
      }
      if (this.$i18n.locale=== 'en') {
        return obj.eContent;
      }
      return obj.content;
    },

    getList(id) { // 文章列表
      this.params.categoryId = id
      articleList(this.params).then(res => {
        if (res.success) {
          this.articleList = res.result.records
        }
      })
    },
    async getDetail(id) { // 文章詳情
      await articleDetail(id).then(res => {
        if (res.success) {
          this.detail = res.result
          this.showList = false
        }
      })
    }
  },
  async mounted() {
    const articleId = this.$route.query.id
    if (articleId) {
      await this.getDetail(articleId)
    }
    this.getCateList()
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15px 50px;
}

.header {
  @include background_color($light_background_color);
}

.side-menu,
.side-bar,
.content {
  @include white_background_color();
  @include title_color($light_title_color);
}

.side-bar {
  min-height: 600px;
  height: auto;
}

.layoutAll {
  min-height: 1200px;
  @include background_color($light_background_color);
}

.detail_content{
  position: relative; /* 添加相对定位 */
  max-width: 100%;
  font-size: 14px;
  white-space: pre-wrap; /* 保留空白，允许换行 */
  word-break: break-word; /* 长单词断行 */
  font-family: monospace; /* 保持预格式化文本的等宽字体 */
  width: 100%;
  min-height: 1200px;
  overflow-y: auto; /* 当内容超出时，仅在y轴上显示滚动条 */
  //@include background_color($light_background_color);
  background-color: #fff;
}

.detail_content-style{
  position: absolute; /* 添加绝对定位 */
  top: 5%; /* 从父元素的底部开始 */
  margin-left: 5%;
  margin-right: 5%;
}

.container {
  margin: 0 auto;
  padding: 20px 0;
}

.side-bar a {
  @include title_color($light_title_color);
}

.layout-footer-center {
  padding: 0px 15px;

  padding-bottom: 15px;
  text-align: center;
}

.title-bg {
  height: 100px;
  width: 100%;
  background-color: #7b7b7b;

  p {
    width: 1200px;
    font-size: 30px;
    height: 100px;
    line-height: 100px;
    color: #fff;
    line-height: 100px;
    margin: 0 auto;
    padding-left: 10px;
  }
}

.article-cate {
  width: 200px;
  height: 30px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  background-color: #666;
}

.article-list {
  li {
    margin: 10px 0;
    color: #2D8CF0;

    &:hover {
      cursor: pointer;
    }
  }
}

</style>
